<!-- Copyright © 2025 Hardcore Engineering Inc. -->
<!-- -->
<!-- Licensed under the Eclipse Public License, Version 2.0 (the "License"); -->
<!-- you may not use this file except in compliance with the License. You may -->
<!-- obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 -->
<!-- -->
<!-- Unless required by applicable law or agreed to in writing, software -->
<!-- distributed under the License is distributed on an "AS IS" BASIS, -->
<!-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -->
<!-- -->
<!-- See the License for the specific language governing permissions and -->
<!-- limitations under the License. -->

<script lang="ts">
  import { Message, Notification, ReactionNotificationContent, SocialID } from '@hcengineering/communication-types'
  import { EmojiPresenter } from '@hcengineering/emoji-resources'
  import { Card } from '@hcengineering/card'
  import { Label } from '@hcengineering/ui'
  import { Person } from '@hcengineering/contact'
  import { employeeByPersonIdStore, getPersonByPersonId } from '@hcengineering/contact-resources'

  import NotificationPreview from './preview/NotificationPreview.svelte'
  import PreviewTemplate from './preview/PreviewTemplate.svelte'
  import inbox from '../plugin'

  export let notification: Notification
  export let card: Card

  let content = notification.content as ReactionNotificationContent
  $: content = notification.content as ReactionNotificationContent

  let author: Person | undefined
  $: void updateAuthor(notification.creator)

  async function updateAuthor (socialId: SocialID): Promise<void> {
    author = $employeeByPersonIdStore.get(socialId)

    if (author === undefined) {
      author = (await getPersonByPersonId(socialId)) ?? undefined
    }
  }

  let message: Message | undefined = undefined
  $: message = notification.message
</script>

<div class="reaction-notification">
  <PreviewTemplate socialId={notification.creator} date={notification.created} color="secondary" showSeparator={false}>
    <svelte:fragment slot="content">
      <Label label={inbox.string.ReactedToYourMessage} />
    </svelte:fragment>
  </PreviewTemplate>

  <div class="reaction-notification__body">
    <div class="reaction-notification__emoji">
      <EmojiPresenter emoji={content.emoji} fitSize center />
    </div>
    {#if message}
      <NotificationPreview
        {card}
        {message}
        socialId={message?.creator ?? notification.creator}
        date={notification.created}
        kind="column"
        padding="0"
        hideHeader
      />
    {/if}
  </div>
</div>

<style lang="scss">
  .reaction-notification {
    display: flex;
    flex-direction: column;
    color: var(--global-secondary-TextColor);
    white-space: nowrap;

    &__body {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding-right: var(--spacing-0_75);
      padding-left: var(--spacing-1_25);
    }

    &__emoji {
      display: flex;
      align-items: center;
      font-size: 1.25rem;
      width: 1.325rem;
      min-width: 1.325rem;
      min-height: 1.325rem;
      height: 1.325rem;
      overflow: hidden;
      margin-right: 0.25rem;
    }
  }
</style>
